<script setup>
import { ref, onMounted } from 'vue'
import { getGoodsList, delGoods,getCategoryList } from '../../api'
import GoodsEdit from '../../components/GoodsEdit.vue'
import { ElMessageBox } from 'element-plus'

// 数据相关
const goodsList     = ref([])
const total         = ref(0) // 总条数

// 分页参数
const page          = ref(1)
const pagesize      = ref(10)

// 弹窗与表单控制
const id            = ref()
const dialogVisible = ref(false)
const goodsForm     = ref()

// 分类相关
const categoryList = ref([])     // 分类选项
const selectedCategory = ref('')    // 当前选中分类ID
const allGoodsList = ref([])

onMounted(() => {
  loadGoodsList()
  loadCategory()
})

/*----------------------------------*/
/*--------- 数据加载与处理 ---------*/
/*----------------------------------*/

const loadGoodsList = async () => {
  const params = {
    page: page.value,
    pagesize: pagesize.value
  }
  const data = await getGoodsList(params)

  goodsList.value = data.list.map(item => {
    item.description = removeTags(item.description)
    return item
  })

  allGoodsList.value = data.list.map(item => {
    item.description = removeTags(item.description)
    return item
  })
  total.value = data.total
}

const removeTags = str => {
  return str.replace(/<[^>]+>/g, '')
}

/*----------------------------------*/
/*----------- 表格操作 -------------*/
/*----------------------------------*/

const addRow = () => {
  if (goodsForm.value) {
    goodsForm.value.resetForm(0)
  }
  id.value = 0
  dialogVisible.value = true
}

const editRow = row => {
  if (goodsForm.value) {
    goodsForm.value.resetForm(row.id)
  }
  id.value = row.id
  dialogVisible.value = true
}

const delRow = row => {
  ElMessageBox.confirm('确定要删除此景点吗?', {
    closeOnClickModal: false,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(async () => {
    if (await delGoods({ id: row.id })) {
      loadGoodsList()
    }
  }).catch(() => {})
}

const handleCurrentChange = value => {
  page.value = value
  loadGoodsList()
}

/*----------------------------------*/
/*---------- 弹出框控制 ------------*/
/*----------------------------------*/

const editSuccess = () => {
  loadGoodsList()
  dialogVisible.value = false
}

const handleBeforeClose = () => {
  ElMessageBox.confirm('确定关闭对话框吗?', {
    showClose: false,
    closeOnclickModal: false,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(() => {
    dialogVisible.value = false
    setTimeout(() => {
      goodsForm.value.resetForm()
    }, 500)
  }).catch(() => {})
}





/*----------------------------------*/
/*---------- 分类加载 --------------*/
/*----------------------------------*/
const filterGoodsByCategory = (categoryId) => {
  if (!categoryId) {
    goodsList.value = allGoodsList.value
  } else {
    goodsList.value = allGoodsList.value.filter(goods => goods.category_id === categoryId)
  }
}

const handleCategoryChange = (categoryId) => {
  selectedCategory.value = categoryId
  page.value = 1
  filterGoodsByCategory(categoryId)
}

const loadCategory = async () => {
  const list = await getCategoryList()
  categoryList.value = list.filter(item => item.pid !== 0)
}
</script>










<template>
  <div>
    <!-- 操作按钮 -->
    <el-button
      type="primary"
      style="margin-bottom: 10px"
      @click="addRow"
    >
      新增景点
    </el-button>

<!-- 分类下拉框-->
  <el-select v-model="selectedCategory" placeholder="选择分类" style="margin-left: 10px; margin-bottom: 10px" @change="handleCategoryChange">
    <el-option
      v-for="category in categoryList"
      :key="category.id"
      :label="category.name"
      :value="category.id"
    />
  </el-select>

    <!-- 新增/编辑景点弹出框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="id ? '修改景点' : '新增景点'"
      :before-close="handleBeforeClose"
    >
      <GoodsEdit
        ref="goodsForm"
        :id="id"
        @success="editSuccess"
      />
    </el-dialog>

    <!-- 景点列表 -->
    <el-table
      :data="goodsList"
      style="width: 100%"
      row-key="id"
      border
      default-expand-all
    >
      <el-table-column prop="id" label="景点编号" width="100" />
      <el-table-column prop="name" label="景点名称" width="260" />
      <el-table-column prop="price" label="旅游价格" width="100" />
      <el-table-column prop="stock" label="限制人数" width="100" />
      <el-table-column prop="description" label="景点简介" />

      <!-- 图片列 -->
      <el-table-column prop="picture" label="景点图片" width="120">
        <template #default="{ row }">
          <el-image
            v-if="row.picture != ''"
            :src="row.picture"
            fit="contain"
            style="display: flex; align-items: center; height:60px;"
          />
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="{ row }">
          <el-button type="warning" @click="editRow(row)">编辑</el-button>
          <el-button type="danger" @click="delRow(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model.currentPage="page"
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pagesize"
      @current-change="handleCurrentChange"
      style="margin-bottom: 50px;"
    />
  </div>
</template>